<template>
  <!-- <div class="detail"> -->
    <main class="main">
      <header-layout :showBack="true" pagename="商品详情" />
      <div class="content">
        <!-- 主图轮播 -->
        <van-swipe :autoplay="4000" @change="onChange">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              {{ current + 1 }}/{{ images.length }}
            </div>
          </template>
        </van-swipe>
        <!-- 标题价格说明 -->
        <div class="desc">
          <!-- 标题 -->
          <div class="des_title">
            <span>{{ detail.goodname }}</span>
            <span>{{ detail.label }}</span>
          </div>
          <!-- 价格 -->
          <div class="des_pic">
            <span>{{ detail.price }}</span>
            <span>{{ detail.org_price }}</span>
          </div>
          <!-- 优惠、限购 -->
          <div class="des_dis">
            <span>满减</span>
            <span>限购dddddd</span>
          </div>
        </div>
        <!-- 配送、包邮 -->
        <div class="delivery-fs">
          <!-- 配送 -->
          <div class="delivery">
            <div class="del-left">
              <span>配送</span>
              <span>支持快递、自提</span>
            </div>
            <div class="del-right">
              <span>门店自营</span>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiayiyeqianjinchakangengduo"></use>
              </svg>
            </div>
          </div>
          <!-- 包邮 -->
          <div class="free-shipping">
            <span>满包邮</span>
            <span>华北地区满100包邮，江浙沪地区满200包邮</span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiayiyeqianjinchakangengduo"></use>
            </svg>
          </div>
        </div>
        <!-- 详情、评论 -->
        <div class="details-comments">
          <div class="det-cmt">
            <van-tabs @click="onClick">
              <van-tab title="详情">详情</van-tab>
              <van-tab title="评论">评论</van-tab>
            </van-tabs>
          </div>
          <div class="det-content">
            <div>
              <div class="contentImg" v-for="contentImg in images" :key="contentImg.id">
                <img :src="contentImg" alt="">
              </div>
            </div>
            <div>
              空
            </div>
          </div>
        </div>

        <!-- 分享、加入购物车 -->
        <van-goods-action>
          
          <div class="fenxiang">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-fenxiang"></use>
            </svg>
            <van-goods-action-icon  text="分享"  @click="showShare = true"/>
          </div>
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
          />
          <div class="gouwuche" @click="$router.push('/shoppingCart')">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gouwuche"></use>
            </svg>
            <van-goods-action-icon  text="购物车" />
          </div>
          
          <van-goods-action-button @click="handleAddToCart(detail)" style="color:#00b578;background:#d4fff1;border-color:#d4fff1;" color="#be99ff" type="warning" text="加入购物车" />
          <van-goods-action-button style="background:#00b578;border-color:#00b578;border-color:#d4fff1;" color="#7232dd" type="danger" text="立即购买" />
        </van-goods-action>
      </div>
    </main>
  <!-- </div> -->
</template>

<script>
import { getDetail } from "@/apis/detail";
import { Toast } from 'vant';
export default {
  data() {
    return {
      // 标题价格说明数据
      detail: [],
      // 轮播图数据 
      images: [],
      // 轮播图右下角数字显示
      current: 0,
      // 分享showShare为false不显示，为true显示
      showShare: false,
      // 分享图标
      options: 
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
          {name: '复制链接', icon: 'link'}
        ],
      
    };
  },
  created() {
    // detail页面数据
    const { id } = this.$route.params;
    getDetail(id).then((data) => {
      this.images = data.data.imgArr;
      this.detail = data.data;
      console.log("detail页面数据", this.detail);
    });
  },
  methods: {
    // 轮播图
    onChange(index) {
      this.current = index;
    },
    //详情、评论
    onClick(name, title) {
      Toast(title);
    },
    // 分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },

    //加入购物车
    handleAddToCart(prod){
        console.log("prod",prod);
        //结构当前商品详情中的各属性
        const { id,goodname,imgArr,price } = prod
        //构建当前选购的商品对象
        const currentProduct ={
            id,
            goodname,
            imgArr,
            price,
            amount:1
        }
        //保存到store中
        //组件中不能直接调用到mutation方法，需要使用store.commit()提交mutation
        this.$store.commit('cartModule/addToCart',{currentProduct})
        this.$toast({
            type:'success',
            message:'加入购物车成功'
        })
    }
  },
};
</script>

<style lang="less" scoped>
@import "../../style/common.less";
header {
  background: rgba(238, 245, 243, 0.3);
}

.main {
  flex: 1;
  overflow-x: hidden;
  .content{
      position: relative;
      top: -2.4rem;
    // 主图轮播
    .van-swipe {
      width: 100%;
      height: 15rem;
      .van-swipe-item {
        // width: 25rem;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .custom-indicator {
        position: absolute;
        right: 0.7rem;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 0.8rem;
        background: rgba(238, 245, 245, 0.1);
      }
    }

    //标题价格说明
    .desc {
      padding: 0.6rem;
      background-color: @blockbdcolor;
      div {
        margin-top: 0.5rem;
      }
      // 标题
      .des_title {
        span {
          display: block;
        }
        span:nth-child(1) {
          font-size: 0.9rem;
          font-weight: 700;
        }
        span:nth-child(2) {
          font-size: 0.7rem;
          color: grey;
          margin-top: 0.5rem;
        }
      }
      // 价格
      .des_pic {
        span:nth-child(1) {
          font-size: 0.8rem;
          color: red;
        }
        span:nth-child(2) {
          margin-left: 0.2rem;
          font-size: 0.6rem;
          color: grey;
          text-decoration: line-through;
        }
      }
      // 优惠、限购
      .des_dis {
        span {
          border: 1px solid @themecolor;
          padding: 0 0.3rem;
          font-size: 0.8rem;
          line-height: 0.8rem;
          color: @themecolor;
          text-align: center;
          border-radius: 0.3rem;
        }
        span:nth-child(2) {
          margin-left: 0.5rem;
        }
      }
    }
    // 配送、包邮
    .delivery-fs {
      background-color: @blockbdcolor;
      margin-top: 0.5rem;
      padding: 1rem 0.5rem;
      font-size: 0.7rem;

      // 配送
      .delivery {
        .del-left {
          float: left;
          span:nth-child(1) {
            font-weight: 700;
          }
          span:nth-child(2) {
            margin-left: 1.8rem;
            color: gray;
          }
        }
        .del-right {
          float: right;
          font-weight: 700;
          svg {
            margin-left: 0.5rem;
          }
        }
      }
      //包邮
      .free-shipping {
        margin-top: 1.3rem;
        span:nth-child(1) {
          font-weight: 700;
        }
        span:nth-child(2) {
          margin-left: 1rem;
          color: gray;
        }
        svg {
          float: right;
        }
      }
    }

    //详情、评论
    .details-comments {
      background-color: @blockbdcolor;
      margin-top: 0.5rem;
      padding: 1rem 0.5rem;
      .det-cmt {
        width: 100%;
        display: flex;
        font-size: .8rem;
        div {
          flex: 1;
          text-align: center;
        }
      }
      
      .det-content{
        margin-top: .5rem;
        .contentImg{
          width: 100%;
          height: 15rem;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    //分享、加入购物车
    .van-goods-action{
      .fenxiang{
        svg{
            margin-left: .7rem;
            width: 1.1rem;
            height: 1.1rem;
        }
      }
      .gouwuche{
        svg{
            margin-left: .6rem;
            width: 1.1rem;
            height: 1.1rem;
        }
      }

    }
  }
  .activ{
    border-bottom: 2px solid @themecolor;
  }
  
}
</style>